<template>
  <div>
    <SearchPageHeader v-if="showPageHeader" title="搜索列表（文章）"/>

    <Card style="margin:20px;">
        <Form :label-width="60">
            <FormItem label="分类：">
                <TagSelect v-model="value" expandable>
                    <TagSelectOption name="tag1">选项一</TagSelectOption>
                    <TagSelectOption name="tag2">选项二</TagSelectOption>
                    <TagSelectOption name="tag3">选项三</TagSelectOption>
                    <TagSelectOption name="tag4">选项四</TagSelectOption>
                    <TagSelectOption name="tag5">选项五</TagSelectOption>
                    <TagSelectOption name="tag6">选项六</TagSelectOption>
                    <TagSelectOption name="tag7">选项七</TagSelectOption>
                    <TagSelectOption name="tag8">选项八</TagSelectOption>
                    <TagSelectOption name="tag9">选项九</TagSelectOption>
                    <TagSelectOption name="tag10">选项十</TagSelectOption>
                    <TagSelectOption name="tag11">选项十一</TagSelectOption>
                    <TagSelectOption name="tag12">选项十二</TagSelectOption>
                    <TagSelectOption name="tag13">选项十三</TagSelectOption>
                    <TagSelectOption name="tag14">选项十四</TagSelectOption>
                    <TagSelectOption name="tag15">选项十五</TagSelectOption>
                    <TagSelectOption name="tag16">选项十六</TagSelectOption>
                    <TagSelectOption name="tag17">选项十七</TagSelectOption>
                    <TagSelectOption name="tag18">选项十八</TagSelectOption>
                    <TagSelectOption name="tag19">选项十九</TagSelectOption>
                    <TagSelectOption name="tag20">选项二十</TagSelectOption>
                </TagSelect>
            </FormItem>
            <Divider dashed/>
            <FormItem label="作者：">
                <Select v-model="model" style="width:200px">
                    <Option v-for="item in authors" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <Divider dashed/>
            <FormItem label="排序：">
                <RadioGroup v-model="disabledGroup">
                    <Radio label="最新发表"></Radio>
                    <Radio label="最多收藏"></Radio>
                    <Radio label="最多阅读"></Radio>
                </RadioGroup>
            </FormItem>
        </Form>
    </Card>

    <Card style="margin:20px;">
        <List item-layout="vertical">
            <ListItem v-for="item in data" :key="item.title">
                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
                {{ item.content }}
                <template #action>
                    <li>
                        <Icon type="ios-star-outline" /> 123
                    </li>
                    <li>
                        <Icon type="ios-thumbs-up-outline" /> 234
                    </li>
                    <li>
                        <Icon type="ios-chatbubbles-outline" /> 345
                    </li>
                </template>
                <template #extra>
                    <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
                </template>
            </ListItem>
        </List>
    </Card>
  </div>
</template>

<script>
import SearchPageHeader from './search-page-header.vue'
export default {
    props:{
        showPageHeader:{
            type: Boolean,
            default: true
        }
    },
    components:{
        SearchPageHeader
    },
    data () {
        return {
            disabledGroup:'最新发表',
            model:'Henry',
            authors:[
                {
                    value: 'Henry',
                    label: 'Henry'
                },
                {
                    value: 'Back',
                    label: 'Back'
                },
                {
                    value: 'Mon',
                    label: 'Mon'
                },
            ],
            value:[],
            data: [
                {
                    title: 'This is title 1',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                },
                {
                    title: 'This is title 2',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                },
                {
                    title: 'This is title 3',
                    description: 'This is description, this is description, this is description.',
                    avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
                    content: 'This is the content, this is the content, this is the content, this is the content.'
                }
            ]
        }
    },
    methods: {
        
    }
}
</script>
